<!DOCTYPE html>
<html>
	<head>
		<title>List Product</title>
		<link href="/static/list.css" rel="stylesheet" type="text/css" />
		<script type="text/javascript">
			var deleteId;
			function deleteProduct(id)
			{
				document.getElementById("hiddenMain").style.display = "block";
				document.getElementById("deleteWarning").style.display = "block";
				deleteId = id;
			}

			function cancelDelet()
			{
				document.getElementById("hiddenMain").style.display = "none";
				document.getElementById("deleteWarning").style.display = "none";
				deleteId = "";			
			}

			function yesToDelete()
			{
				window.location.href = "/delete?id=" + deleteId;

			}

		</script>
	</head>

	<body>
		<div class="main">
			<div class="head">
				<div class="sysTime"></div>
				<div class="input">
					<a href="/input">
					<button>New Product</button>
					</a>
				</div>
			</div>
			<div class="listProduct">
				{%for product in products%}
					<div class="product">
						<div class="thumbnail"><img src="{{product.thumbnail}}"/></div> 
						<div class="name">{{product.name}}</div>
						<div class="description">{{product.description}}</div>

						<div class="onSaleTime">SALE:{{ product.onSaleTime|date:"Y-m-d H:i" }}</div>
						<div class="show"></div>
						<div class="delete"></div>
						<div class="moreButton"><a href="/more?id={{product.id}}"><button>More</button></a></div>
						<div class="deleteButton"><button onclick="deleteProduct({{product.id}})">Delete</button></div>
					</div>
				{%endfor%}
			</div>
			<div id="hiddenMain"></div>
			<div id="deleteWarning">
				<label>Are you sure to delete?</label>
				<button id="yesToDelete" onclick="yesToDelete()">Yes</button>
				<button id="cancelDelete" onclick="cancelDelet()">Cancel</button>
			</div>
		</div>
	</body>

</html>